<template>
	<!-- 个人中心首页 -->
	<view class="shop-content">
		<view class="top">
			<view class="shop-left-content">
				<view class="user-img">
					<image class="img" src="//image.cnhnb.com/20b0aaeb-c6cb-48c1-9481-80952abca595"></image>
				</view>
				<view class="user-name">
					{{Name}}({{Phone}})
					<view class="sayHello"> {{Time}} </view>
				</view>
			</view>
			<view class="shop-right-content">
				<view class="merchant-certification">
					<view>认证情况</view>
				</view>
				<view class="user-volume flex">
					<view class="item">
						<text>{{Data.Type1}}</text>
						<text>待付款</text>
					</view>
					<view class="item">
						<text>{{Data.Type2}}</text>
						<text>待发货</text>
					</view>
					<view class="item">
						<text>{{Data.Type3}}</text>
						<text>待收货</text>
					</view>
					<view class="item">
						<text>0</text>
						<text>待退款</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 企业信用 -->
		<!-- <view class="">
			<text class="title">企业信用</text>
			<view class="list pt-4 pl-4 mt-2">
				<view class="charts-box">
					<qiun-data-charts type="radar" :opts="opts" :chartData="chartData" />
				</view>
			</view>
		</view> -->
		<!--  -->
		<grzxsytab :titleName="titleName"></grzxsytab>
	</view>
</template>

<script>
	const app = getApp()
	import grzxsytab from "./grzxsytab.vue";
	import { UserTransaction } from '@/api/group.js'
	export default {
		name: "grzxsy",
		data() {
			return {
				titleName: "好货推荐",
				Phone: '',
				Name: '',
				Time: '',
				Data:{},
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					dataPointShape: false,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					extra: {
						radar: {
							gridType: "circle",
							gridColor: "#CCCCCC",
							gridCount: 3,
							opacity: 1,
							max: 240,
							labelShow: true,
							linearType: "custom",
							border: false
						}
					}
				}
			};
		},
		components: {
			grzxsytab,
		},
		mounted() {
			if (uni.getStorageSync('loginInfo')) { //本地存储地址
				this.Phone = uni.getStorageSync('loginInfo').use.slice(7, 11)
				this.Name = uni.getStorageSync('loginInfo').username
			}
			var date = new Date();
			var hours = date.getHours();
			if (hours >= 0 && hours < 12) {
				this.Time = '上午好';
			} else {
				this.Time = '下午好';
			}
			this.getServerData();
			this.getData()
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
						categories: ["按时交易", "商品质量", "财务状况", "经营情况", "其他"],
						series: [{
							name: "企业信用雷达图",
							data: [90, 110, 165, 195, 187]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getData(){
				uni.request({
					url: app.globalData.Domain_Name + '/UserTransaction?token='+uni.getStorageSync('loginInfo').token,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "GET",
					success: (res) => {
						console.log(res)
						this.Data = res.data.Data[0]
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.shop-content {
		position: relative;
		width: 100%;
	}

	.title {
		color: #28a745;
		font-size: 48rpx;
		margin-bottom: 24rpx;
	}

	.list {
		padding-bottom: 25rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.top {
		display: flex;
		align-items: center;
	}

	.shop-left-content {
		// position: relative;
		height: 440rpx;
		width: 480rpx;
		background-image: url(//files.cnhnb.com/master-ssr/users/img/c695a5f.png);
		background-size: contain;
		display: flex;
		flex-direction: column;
		align-items: center;

		.user-img {
			height: 148rpx;
			width: 148rpx;
			margin: 76rpx auto 0;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.user-name {
			text-align: center;
			margin: 20rpx auto 0;
			font-size: 32rpx;
			color: #fff;
			letter-spacing: 0;

			.sayHello {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #fff;
				letter-spacing: 0;
			}
		}
	}

	.shop-right-content {
		width: 1520rpx;
		border: none;

		.merchant-certification {
			font-size: 32rpx;
			color: #333;
			letter-spacing: 0;
			height: 92rpx;
			line-height: 92rpx;
			width: 100%;
			background: #fff;

			view {
				position: relative;
				left: 40rpx;
			}
		}

		.user-volume {
			height: 308rpx;
			width: 100%;
			background: #fff;
			border-top: 2rpx solid #eaeaea;

			.item {
				position: relative;
				left: 0;
				top: 72rpx;
				float: left;
				height: 160rpx;
				width: 25%;
				border-right: 2rpx solid #ddd;
				text-align: center;

				.text {
					position: relative;
					top: 30rpx;
					color: #333;
					letter-spacing: 0;
					font-size: 48rpx;
				}

				text {
					font-size: 28rpx;
					position: relative;
					top: 30rpx;
					color: #333;
					letter-spacing: 0;
				}
			}

			.item:last-child {
				border: none;
			}
		}
	}
</style>